import FlowGraph from '../../Graph';
import { Button, Icon, Tooltip } from 'antd';
import toolStyle from './index.css';
import { useEffect, useState } from 'react';
import Save from "@/pages/Dialog/Add/save";
import EditDialogName from './editDialogName';
import { history, Link } from "umi";

const ToolBar = props => {
  const [canUndo, setCanUndo] = useState(false);
  const [canRedo, setCanRedo] = useState(false);
  const [isFull, setIsFull] = useState(false);

  useEffect(() => {
    const { graph } = FlowGraph;
    const { history } = graph;
    setCanUndo(history.canUndo());
    setCanRedo(history.canRedo());
    history.on('change', () => {
      setCanUndo(history.canUndo());
      setCanRedo(history.canRedo());
    });
  }, []);

  const handleClick = name => {
    const { graph } = FlowGraph;
    switch (name) {
      case 'undo':
        graph.history.undo();
        break;
      case 'redo':
        graph.history.redo();
        break;
      case 'zoom-in':
        const NumIn = Number(graph.zoom().toFixed(1));
        if (NumIn < 16) {
          graph.zoom(0.1);
        }
        break;
      case 'zoom-out':
        const NumOut = Number(graph.zoom().toFixed(1));
        if (NumOut > 0.1) {
          graph.zoom(-0.1);
        }
        break;
      case 'charts':
        props.openPage('charts');
        break;
      case 'golbalSet':
        props.openPage('golbalSet');
        break;
      case 'fitCenter':
        const nodes = graph.getNodes();
        const startNodes = nodes.filter(node => node.label === 'start');
        // console.log(startNodes[0].position());
        graph.centerContent();
        // graph.center()
        // graph.centerCell(startNodes[0])
        break;
      case 'wordTrough':
        props.openPage('wordTrough');
        break;
      case 'clearBlank':
        graph.clearCells();
        break;
      case 'clearHistory':
        props.getDialogData();
        break;
      case 'rollback':

        break;
      default:
        break;
    }
  };

  const IconFont = Icon.createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/c/font_2255794_fk26nwh1w3.js',
  });

  return (
    <div className={'clearfix'}>
      <div style={{ float: 'left' }}>
        <span className={toolStyle.group}>
          <Tooltip title={'撤销'}>
            <IconFont
              type="icon-Undo"
              size={16}
              style={{ marginRight: 10, fontSize: 16, color: canUndo ? '#3C3C3C' : '#cccccc' }}
              onClick={() => handleClick('undo')}
            />
          </Tooltip>
          <Tooltip title={'恢复'}>
          <IconFont
              type="icon-Redo"
              size={16}
              style={{ fontSize: 16, fontWeight: 400, color: canRedo ? '#333333' : '#cccccc' }}
              onClick={() => handleClick('redo')}
            />
          </Tooltip>
        </span>
        <span className={toolStyle.group}>
          <Tooltip title={'放大'}>
            <Icon
              type="zoom-in"
              size={16}
              style={{ marginRight: 10, fontSize: 16, fontWeight: 400, color: '#333333' }}
              onClick={() => handleClick('zoom-in')}
            />
          </Tooltip>
          <Tooltip title={'缩小'}>
            <Icon
              type="zoom-out"
              size={16}
              style={{ fontSize: 16, fontWeight: 400, color: '#333333' }}
              onClick={() => handleClick('zoom-out')}
            />
          </Tooltip>
        </span>
        <span className={toolStyle.group}>
          <Tooltip title={'适应屏幕'}>
            <Icon
              type="apartment"
              size={16}
              style={{ fontSize: 16, fontWeight: 400, color: '#333333' }}
              onClick={() => handleClick('fitCenter')}
            />
          </Tooltip>
        </span>
        {/*<span className={toolStyle.group} onClick={() => handleClick('clearBlank')} style={{cursor:'pointer',userSelect: 'none'}}>*/}
        {/*  <Tooltip title={'清空画布'}>*/}
        {/*    <Button type={'link'}>清空画布</Button>*/}
        {/*  </Tooltip>*/}
        {/*</span>*/}
        {/*<span className={toolStyle.group} onClick={() => handleClick('clearHistory')} style={{cursor:'pointer',userSelect: 'none'}}>*/}
        {/*  <Tooltip title={'清空草稿'}>*/}
        {/*    <Button type={'link'}>清空草稿</Button>*/}
        {/*  </Tooltip>*/}
        {/*</span>*/}
        <span className={toolStyle.group} style={{color: '#333333'}}>
          <EditDialogName 
            name={props.name}
            dialogId={props.dialogId}
            refreshName={props.refreshName}
            openMoveClass={props.openMoveClass}
          />
        </span>
        
      </div>
      <div style={{ float: 'right' }}>
        <span
          className={toolStyle.group}
          onClick={() => handleClick('wordTrough')}
          style={{ cursor: 'pointer', userSelect: 'none', fontWeight: 400, color: '#333333' }}
        >
          <Tooltip title={'相关词槽'}>
            <Icon type="appstore" size={16} style={{ marginRight: 10, fontSize: 16 }} />
            相关词槽
          </Tooltip>
        </span>
        {/* <span
          className={toolStyle.group}
          onClick={() => handleClick('charts')}
          style={{ cursor: 'pointer', userSelect: 'none', fontWeight: 400, color: '#333333' }}
        >
          <Tooltip title={'训练准确率报告'}>
            <Icon
              type="bar-chart"
              size={16}
              style={{ marginRight: 10, fontSize: 16 }}
            />
            训练准确率报告
          </Tooltip>
        </span> */}
        <span
          className={toolStyle.group}
          onClick={() => handleClick('golbalSet')}
          style={{ cursor: 'pointer', userSelect: 'none', fontWeight: 400, color: '#333333' }}
        >
          <Tooltip title={'全局设置'}>
            <Icon type="setting" size={16} style={{ marginRight: 10, fontSize: 16 }} />
            全局设置
          </Tooltip>
        </span>
        <Link 
          to={{ pathname: 
            props.pathInfo.pathname.indexOf("systemKnowledge") > -1 ? 
            "/knowledgeDesign/systemKnowledge/" + props.pathInfo.id + "/dialog" : 
            "/knowledgeDesign/myKnowledge/" + props.pathInfo.id + "/dialog",
            query: props.pathInfo.query.libraryQuery ? JSON.parse(props.pathInfo.query.libraryQuery) : props.pathInfo.query
            }}>
          <span
            className={toolStyle.group}
            onClick={() => handleClick('rollback')}
            style={{ cursor: 'pointer', userSelect: 'none', fontWeight: 400, color: '#333333' }}
          >
            <Tooltip title={'返回列表'}>
              <Icon type="rollback" size={16} style={{ marginRight: 10, fontSize: 16 }} />
              返回列表
            </Tooltip>
          </span>
        </Link>
        <span className={toolStyle.group} style={{color: '#333333'}}>
          <Save
            dialogId={props.dialogId}
            showTrain={props.showTrain}
            graphObj={props.graphObj}
            status={props.status}
            publishTime={props.publishTime}
            getStatusById={props.getStatusById}
          />
        </span>
        
      </div>
    </div>
  );
};

export default ToolBar;
